<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频</title>
    <script type="text/javascript">
        function checkVideo(){
            let myVideo = document.createElement('video');
            if( myVideo.canPlayType ) {
                if ( '' != myVideo.canPlayType('video/mp4;codecs="avc1.64001E')) {
                    console.log("support H.264");
                }

                if ( '' != myVideo.canPlayType('video/ogg;codecs="vp8')) {
                    console.log("support vp8");
                }
                
                if ( '' != myVideo.canPlayType('video/ogg;codecss="theora"')) {
                    console.log("support theora");
                }
            } else {
                console.log('not support video check!');
            }
        }

        function showInfo () {
            let myAudio = document.getElementById('videoControl');
            console.log('currentSrc', myAudio.currentSrc); // 文件路径
            console.log('currentTime', myAudio.currentTime); // 开始播放时间
            console.log('duration', myAudio.duration); // 音长
            console.log('ended', myAudio.ended); // 播放结束后会返回true
            console.log('played', myAudio.played); // 播放是返回true
            console.log('volume', myAudio.volume); // 音量 0-1
            console.log('seeking', myAudio.seeking);
        }

        window.onload = function () {
            checkVideo();
        }
    </script>
</head>
<body>
    <!-- 鼠标移入移出自动播放和禁止 -->
    <video id="videoControl" style="width: 800px; height:450px;" controls="controls" onmouseover="this.play()" onmouseout="this.pause()" >
        <source src="https://share.wanmen.org/wanmen.mp4" type="video/mp4">
            你的浏览器不支持video标签
    </video>
    <input type="button" onclick="showInfo()" value="showInfo">
</body>
</html>